
<template>
  <div>
    <Modal
      v-model="showBox"
      title="增值服务购买"
      :footer-hide="true"
      :mask-closable="false"
      @on-visible-change="vChange"
      class-name="vertical-center-modal"
      width="800"
    >
      <!-- <div class="marginB20" style="background:red;color:white; padding:50px 20px;height:400px; overflow-y:auto; margin:-16px;">
        <h1>这里是很漂亮的设计</h1>
        <h1>图文简介</h1>
        <h1>诱惑用户购买综合套餐</h1>
        <h2>综合套餐xxx钱</h2>
        <h2>专利搜索一年(送专利管理xxx)，1800钱</h2>
        <h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1>
        <h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1>
        <h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1>
        <h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1>
        <h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1>
        <h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1>
        <h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1><h1>图文简介</h1>
      </div> -->
      <ul class="tBoxd padding0 " style="margin-right:-15px;">
        <li 
          class="textLink textCenter " 
          :class="$app.judgeData(zhongObj) && (zhongObj.id== val.id) && ' zhong'"
          v-for="(val,i) in taoClist" 
          :key="'d'+i"  
          style="width:30%;"
          @click="zTunChange(val)"
        >
          {{val.name}}
          <i class="iconfont iconjiaobiaoxuanzhong f_30 absolute" ></i>
        </li>
      </ul>
      <div class="textRight">

        <Button type="primary" class="marginB10 " size="large"  @click="goFun">确 定</Button>
      </div>
    </Modal>

    <PayBox ref="payBox" :noOrderList="true"/>

  </div>
</template>

<style lang="less" scoped>
    @import './css/temp.less';
</style>


<script>
import PayBox from "@$@/_service/payBox";
export default {
  name: "taoCan",
  components: {PayBox},
  data() {
    let data = {
      // 弹框是否显示
      showBox:false,
      taoClist:[],//支付套餐列表

      //选中的大对象
      zhongObj:{},
     
    };
    return data;
  },
  created() {
    $ajax.psGoodsList('',resData=>{
      this.taoClist=resData;
    });
  },
  methods: {
    vChange(buEr){
      if(buEr){
        $ajax.psGoodsList('',resData=>{
          this.taoClist=resData;
        });
      }else{//关闭

        let {
          $route:{
            query:{
              TC_type
            }
          }
        }=this;

        if($app.judgeData(TC_type)){
          $app.closeTag(this.$route); // 关闭本页面
        }else{
          // 初始化数据
          setTimeout(()=>{
            this.taoClist=[];
            this.zhongObj={};
          },200);

          this.$emit('huoDci');//刷新次数 
        }

        
      }

    },
    goFun(){
      let {
        //zhongObj.count: 预留字段，日后搞促销，搞活动的时候使用，-1的时候，证明这个套餐不限量购买。
        zhongObj:{
          id
        }
      }=this;

      if($app.judgeData(id)){
        $ajax.psGL_buy(id,resData=>{
          let {
            order_id
          }=resData;
          $app.payBoxShow(this,order_id,{
            payFun:()=>{
              this.showBox=false;
            }
          });
        });
      }else{
        $app.alert('请选择购买服务')
      }
      


      


    },
    zTunChange(obj,i){
      this.zhongObj=obj;
    }
    
  }
};
</script>
